		html,
		body {
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}
		
		body {
			background: url(../img/bg.jpg);
		}
		
		.table {
			width: 70%;
			height: 65%;
			border: 1px solid gray;
			background: url(../img/table.jpg);
			display: flex;
			align-content: space-around;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			font-size:36px;
			color:yellowgreen;
		}
		
		.box {
			float: left;
			margin: 10px;
			background: no-repeat;
			overflow: hidden;
			position: relative;
			width: 40px;
			height:60px;
		}
		
		.card,
		.cardbg {
			width: 100%;
			height: 100%;
			border-color: yellow;
			position: absolute;
			background: no-repeat;
			background-size: cover;
		
			transition:all 0.5s;
		}
		.card{
			z-index: 1;
			background: url(../img/deck.png);
		}
		
		.cardbg {
			background: url(../img/deck.png);
			background-position: 0 -480px;
			z-index:0;
			border-color: green;
		}
		
		.choose {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			width: 90%;
			align-content: stretch;
			alignment-baseline: baseline;
		}
		
		.choose label {
			height: 30px;
			font-size: 36px;
			color: white;
		}
		
		.choose ul {
			list-style-type: none;
		}
		
		.choose ul li {
			float: left;
			margin: 10px;
			padding: 10px 20px;
			background-color: gray;
			border-radius: 10px;
		}